iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

別再說我不會框架,網頁 Vue 起來!系列 第 20

專案小幫手- Vue CLI

  • 分享至 

  • xImage
  •  

前言

Vue CLI 是用來快速建置 Vue 開發環境的一套工具,它是由 Vue.js 團隊所建立的命令列工具。提供 vue 相關的命令執行,例如: vue create建立新專案、vue serve 即時顯示開發畫面、vue ui圖形化介面來管理專案。

Vue CLI是很多不同 Component 組合而成,例如: CLI serviceCLI pluginsweb UI

安裝

npm install -g @vue/cli
# 或
yarn global add @vue/cli

確認是否安裝成功

vue --version

建立專案

vue create my-project
# OR
vue ui

Vue CLI 版本升級

npm update -g @vue/cli

# 或
yarn global upgrade --latest @vue/cli

神奇指令?

打開 package.json 查查 Vue-CLI 幫我們建立的 script

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

當我們輸入 npm run serve 就會去找 script 中的 serve
vue-cli-service 對應到的是專案內中 ./node_modules/.bin/vue-cli-service

還可以看看 Vue-CLI 幫我們安裝的套件

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },

Vue CLI Service?

一個 run-time dependency,提供指令讓我們可以啟動 Vue 專案,例如servebuildinspect

ex:

vue-cli-service serve
// 啟動一個server,能即時更新

vue-cli-service build
// 在dist/ 產生打包檔 (JS/CSS/HTML的壓縮檔)

vue-cli-service inspect
// 檢查 webpack 的設定

專案內容 ?

  • public 包含 public 檔案,例如 index.html favicon.ico,任何靜態檔都可以放在這,不會經過 webpack 打包
  • src 原始檔案,大部分開發都在這異動
  • src/assets 專案的 assets,例如 logo
  • src/components 放置 Vue 元件
  • src/App.vue 主要的元件
  • src/main.js 應用程式的啟動檔案
  • babel.config.js Babel 設定檔
  • package.json 專案相依套件,ESLint、PostCSS 等相關設定
  • node_modules 所有已安裝的套件

參考

A Beginner’s Guide to Vue CLI


下篇預告

  • Vue Router

每日一句:
學一次,用一輩子


上一篇
[Part 8 ] Vue.js 的精隨- 自訂事件
下一篇
頁面切換好夥伴- Vue Router [序]
系列文
別再說我不會框架,網頁 Vue 起來!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言